<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-dropdown>
    <button type="button" class="btn btn-sm btn-secondary" clrDropdownTrigger>
        <clr-icon shape="plus"></clr-icon> Credentials <clr-icon shape="caret down"></clr-icon>
    </button>
    <clr-dropdown-menu *clrIfOpen>
        <button type="button" (click)="populateCredentialForm({'id':null,'name':null,'username':null,'password':null,'privateKey':null});addEdit='Add';machineCredential=true;" clrDropdownItem>Remote Machine</button>
        <button type="button" (click)="populateCredentialForm({'id':null,'name':null});addEdit='Add';kubernetesCredential=true;" clrDropdownItem>k8s Cluster</button>
        <button type="button" (click)="populateCredentialForm({'id':null,'name':null,'userName':null,'password':null});addEdit='Add';vcenterCredential=true;" clrDropdownItem>vCenter</button>
    </clr-dropdown-menu>
</clr-dropdown>
<clr-datagrid [clrDgLoading]="isLoading">
	<clr-dg-column [clrDgField]="'name'">Credential Name</clr-dg-column>
    <clr-dg-column [clrDgField]="'type'">Credential Type</clr-dg-column>
    <clr-dg-row *clrDgItems="let credentialVal of credentials" [clrDgItem]="credentialVal">
        <clr-dg-action-overflow>
            <button class="action-item" *ngIf="credentialVal.type=='MACHINE'" (click)="populateCredentialForm(credentialVal);addEdit='Edit';machineCredential=true;">Edit</button>
            <button class="action-item" *ngIf="credentialVal.type=='K8S_CLUSTER'" (click)="populateCredentialForm(credentialVal);addEdit='Edit';kubernetesCredential=true;">Edit</button>
            <button class="action-item" *ngIf="credentialVal.type=='VCENTER'" (click)="populateCredentialForm(credentialVal);addEdit='Edit';vcenterCredential=true;">Edit</button>
            <button class="action-item" (click)="deleteCredential(credentialVal)">Delete</button>
        </clr-dg-action-overflow>
		<clr-dg-cell>{{credentialVal.name}}</clr-dg-cell>
		<clr-dg-cell>{{credentialVal.type}}</clr-dg-cell>
    </clr-dg-row>
	<clr-dg-footer>
		<clr-dg-pagination #pagination [clrDgPageSize]="10">
			<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Credentials per page</clr-dg-page-size>
			{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} credentials
		</clr-dg-pagination>
	</clr-dg-footer>
</clr-datagrid>
<clr-modal [(clrModalOpen)]="machineCredential" [clrModalClosable]="false">
    <h3 class="modal-title">{{addEdit}} Machine Credential</h3>
    <div class="modal-body">
        <clr-alert *ngIf="authErrorFlag" [clrAlertType]="'danger'">
            <div class="alert-item">{{authAlertMessage}}</div>
        </clr-alert>
        <form #machineCredentialForm="ngForm" (ngSubmit)="addUpdateMachineCredential(machineCredentialForm);" *ngIf="credentialFormData" ngNativeValidate>
            <section class="form-block">
                <div class="form-group">
                    <input type="text" name="id" [(ngModel)]="credentialFormData.id" [hidden]="true">
                </div>
                <div class="form-group">
                    <label for="name">Credential Name</label>
                    <input type="text" name="name" pattern="^[A-Za-z0-9-_.]+$" title="alphanumeric and special characters (_ - .) are allowed" [(ngModel)]="credentialFormData.name" [required]="addEdit == 'Add'" [readonly]="addEdit == 'Edit'">
                </div>
                <div class="form-group">
                    <label for="username">User Name</label>
                    <input type="text" name="username" [(ngModel)]="credentialFormData.username" required>
                </div>
                <div class="form-group">
                    <label>Authorization</label>
                    <div class="clr-control-container clr-control-inline">
                        <div class="clr-radio-wrapper">
                            <input type="radio" id="apassword" name="authorization" value="apassword" class="clr-radio" (click)="showAuthorization($event.target.value);">
                            <label for="apassword" class="clr-control-label">Password</label>
                        </div>
                        <div class="clr-radio-wrapper">
                            <input type="radio" id="privateKey" name="authorization" value="privateKey" class="clr-radio" (click)="showAuthorization($event.target.value);">
                            <label for="privateKey" class="clr-control-label">Private Key</label>
                        </div>
                    </div>
                </div>
                <div class="form-group" [hidden]="passwordHidden">
                    <input type="password" name="password" ngModel [required]="!passwordHidden">
                </div>
                <div class="form-group" [hidden]="privateKeyHidden">
                    <input type="file" name="privateKey" (change)="getPvtKeyFiles($event)" ngModel [required]="!privateKeyHidden">
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="machineCredential=false;machineCredentialForm.reset();ngOnInit();">CANCEL</button>
            <button type="submit" class="btn btn-primary" [clrLoading]="submitBtnState">SUBMIT</button>
        </form>
    </div>
</clr-modal>
<clr-modal [(clrModalOpen)]="kubernetesCredential" [clrModalClosable]="false">
    <h3 class="modal-title">{{addEdit}} k8s Credential</h3>
    <div class="modal-body">
        <form #kubernetesCredentialForm="ngForm" (ngSubmit)="addUpdateKubernetesCredential(kubernetesCredentialForm.value);kubernetesCredential=false;kubernetesCredentialForm.reset();" *ngIf="credentialFormData" ngNativeValidate>
            <section class="form-block">
                <div class="form-group">
                    <input type="text" name="id" [(ngModel)]="credentialFormData.id" [hidden]="true">
                </div>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" pattern="^[A-Za-z0-9-_.]+$" title="alphanumeric and special characters (_ - .) are allowed" [(ngModel)]="credentialFormData.name" [required]="addEdit == 'Add'" [readonly]="addEdit == 'Edit'">
                </div>
                <div class="form-group">
                    <label for="kubeConfig">Kube Config File 
                        <a href="javascript://" role="tooltip" aria-haspopup="true" class="tooltip tooltip-md tooltip-bottom-right">
                            <clr-icon shape="info-circle" size="24"></clr-icon>
                            <span class="tooltip-content">Mandatory only if mangle is not deployed in same k8s cluster</span>
                        </a>
                    </label>
                    <input type="file" name="kubeConfig" (change)="getK8SFiles($event)" ngModel>
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="kubernetesCredential=false;kubernetesCredentialForm.reset();ngOnInit();">CANCEL</button>
            <button type="submit" class="btn btn-primary">SUBMIT</button>
        </form>
    </div>
</clr-modal>
<clr-modal [(clrModalOpen)]="vcenterCredential" [clrModalClosable]="false">
    <h3 class="modal-title">{{addEdit}} Vcenter Credential</h3>
    <div class="modal-body">
        <form #vcenterCredentialForm="ngForm" (ngSubmit)="addUpdateVcenterCredential(vcenterCredentialForm.value);vcenterCredential=false;vcenterCredentialForm.reset();" *ngIf="credentialFormData" ngNativeValidate>
            <section class="form-block">
                <div class="form-group">
                    <input type="text" name="id" [(ngModel)]="credentialFormData.id" [hidden]="true">
                </div>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="name" pattern="^[A-Za-z0-9-_.]+$" title="alphanumeric and special characters (_ - .) are allowed" [(ngModel)]="credentialFormData.name" [required]="addEdit == 'Add'" [readonly]="addEdit == 'Edit'">
                </div>
				<div class="form-group">
                    <label for="userName">User</label>
                    <input type="text" name="userName" [(ngModel)]="credentialFormData.userName" required>
                </div>
				<div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" ngModel required>
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="vcenterCredential=false;vcenterCredentialForm.reset();ngOnInit();">CANCEL</button>
            <button type="submit" class="btn btn-primary">SUBMIT</button>
        </form>
    </div>
</clr-modal>